import React from 'react';
import {Tabs, Radio, Input, Select, Row, Col, Button,Table,Space} from 'antd';
import {connect} from 'dva';




import styles from './index.less';

const {TabPane} = Tabs;

const {Option} = Select

const { Column, ColumnGroup } = Table;

/**
 *  登录界面
 */
@connect(({loading}) => (
  {
    //控制状态，绑定事件
    submitting: loading.effects["login/doLogin"]
  }
))

export default class AccessManagement extends React.Component {

  handleModeChange = (e) => {
    this.setState({
      mode: e.target.value
    })
  }

  selectChange = (e) => {
    alert(e)
  }
  state = {
    mode: 'management',
  }

  render() {
    const {mode} = this.state;
    const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
    ];
    const columns = [
      {
        title: 'Role',
        dataIndex: 'role',
        key: 'role',
      },
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Create date',
        dataIndex: 'create_date',
        key: 'create_date',
      },
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Password',
        dataIndex: 'password',
        key: 'password',
      },
      {
        title: 'Status',
        dataIndex: 'status',
        key: 'status',
      },

    ];

    return (
      <div className={styles.approved}>
        <div><h3>Access management</h3></div>
        <Radio.Group onChange={this.handleModeChange} value={mode} style={{marginBottom: 8}}>
          <Radio.Button value="management">Role management</Radio.Button>
          <Radio.Button value="permissions">Permissions</Radio.Button>
        </Radio.Group>
        <div>
          <Row justify="space-between">
            <Col span={4}>
              <div className={styles.headTitle}>
                <div className={styles.headTitleName}>Role</div>
                <Input placeholder="Basic usage"/>
              </div>

            </Col>
            <Col span={4}>
              <div className={styles.headTitle}>
                <div className={styles.headTitleName}>Status</div>
                <Select defaultValue="lucy" style={{width: "100%"}} onChange={this.selectChange}>
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </div>

            </Col>
            <Col span={4}>
              <div className={styles.headTitle}>
                <div className={styles.headTitleName}>&nbsp;</div>
                <Button>Search</Button>
              </div>
            </Col>
          </Row>
        </div>
        <div style={{margin: "10px 0 10px 0"}}>
          <Button type="primary" style={{width:200}}>Add New Role</Button>
        </div>
        <div id="table">
          <Table dataSource={dataSource} columns={columns} />
        </div>
      </div>
    );


  }
}
